/**
 * Tiem: 2023-2-9
 * FileName: After Sales Settings
 * Editor: Haidong
 */

import React, { Component } from "react";
import { Radio, Select, Input, Typography, Button, Space } from "antd";
import Tr from '../component/Tbody';
import _ from 'lodash';
import "../style/index.less";

const { Title } = Typography;
export default class AfterSalesSetting extends Component {
    constructor(props){
        super();
        this.state = {
            refundRules:2,
            tbody:[],
        }
    }

    //Initialization
    componentDidMount(){
        this.getData()
    }

    //CTRL
    getData = async () =>{
        
    }

    //退款规则选择
    rulesChange = (e) => {
        let refundRules = e.target.value
        this.setState({
            refundRules
        })
    }
    //添加阶梯退款规则
    addrefundRules = () => {
        let tbody = this.state.tbody
        if(tbody.length >= 4){
            React.$message({
                type: 'warning',
                content: '阶梯退款规则最多添加5条'
            })
        }else{
            tbody.push({})
            this.setState({
                tbody
            })
        }
    }
    //删除阶梯退款规则
    cancelrefundRules = () => {
        let tbody = this.state.tbody
        if(tbody.length <= 0){
            React.$message({
                type: 'warning',
                content: '阶梯退款规则最少1条'
            })
        }else{
            tbody = _.dropRight(tbody)
            this.setState({
                tbody
            })
        }
    }
    //VIEW
    render(){
        const {refundRules,tbody} = this.state
        return(
            // 改用FORM 
            <div className="pagebg">
                <div className="settingPage">
                    <Title level={5}>酒店售后订单设置</Title>
                    <div className="notUsed">
                        <div className="title">未使用订单状态</div> 
                        <div>
                            用户爱宠入住前&nbsp;&nbsp;&nbsp;
                            <Input className="Input" placeholder="请输入天数" name="date" />
                            <Select defaultValue={1} >
                                <Select.Option value={1} >天</Select.Option>
                                <Select.Option value={2} >时</Select.Option>
                            </Select>
                            &nbsp;&nbsp;&nbsp;前申请退款
                        </div> 
                        <div>
                            退款规则：
                            <Radio.Group defaultValue={refundRules} onChange={(e)=>{this.rulesChange(e)}}>
                                <Space direction="vertical">
                                    <Radio value={1}>全部退款</Radio>
                                    <Radio value={2}>阶梯退款（按用户支付的实际金额比例收取手续费）</Radio>
                                </Space>
                            </Radio.Group>
                            {refundRules === 2 ?
                                <div style={{marginLeft:80,marginBottom:5,width:"60%",textAlign:"right"}}>
                                    <table className="table" border={1} >
                                        <tr>
                                            <th>距预订入驻时间</th>
                                            <th>取消政策及费率</th>
                                        </tr>
                                        <tr>
                                            <td>
                                                距预订入住&nbsp;&nbsp;&nbsp;
                                                <Input style={{width:100,backgroundColor:"rgb(242,242,242)",textAlign:"center"}} />&nbsp;&nbsp;&nbsp;小时取消订单
                                            </td>
                                            <td>
                                                <Input style={{width:150,textAlign:"center"}} 
                                                addonAfter="%" />
                                            </td>
                                        </tr>
                                        {tbody.map((v,k)=>{
                                            return <Tr />
                                        })}
                                    </table>
                                    <Space>
                                        <Button onClick={()=>{
                                            this.cancelrefundRules()
                                        }} >删除阶梯退款规则</Button>
                                        <Button onClick={()=>{
                                            this.addrefundRules()
                                        }} >添加阶梯退款规则</Button>
                                    </Space>
                                </div> 
                                : null
                            }
                        </div>
                    </div>
                    <div className="used">
                        <div className="title">已使用订单状态</div>
                        <div>
                            退房时间超过&nbsp;&nbsp;&nbsp;
                            <Input className="Input" name="time" defaultValue={14} />
                            <Select  defaultValue={1}>
                                <Select.Option value={1} >时</Select.Option>
                            </Select>
                            &nbsp;&nbsp;&nbsp;申请退房系统按新的1天计费
                        </div> 
                    </div>
                    <div className="operate">
                        <Title level={5}>最后一次保存操作人信息</Title>
                        <div>李世杰 2023-01-12 17:13:40</div>
                    </div>
                    <div className="button">
                        <Button type="primary">保存配置</Button>
                    </div>
                </div>
            </div>
        )
    }

}